<template>
  <div class="page-container">
    <div class="content-wrapper">
      <div class="policy-header">
        <h1>用户协议</h1>
        <button class="back-button" @click="goBack">关闭</button>
      </div>
      <div class="agreement-content">
        <section>
          <h2>1. 协议的接受</h2>
          <p>欢迎使用健康预测系统（以下简称"本系统"）。通过访问或使用本系统，您确认您已阅读、理解并同意受本用户协议（以下简称"本协议"）的约束。如果您不同意本协议的任何条款，请立即停止访问或使用本系统。</p>
        </section>
        
        <section>
          <h2>2. 用户注册与账户管理</h2>
          <h3>2.1 注册要求</h3>
          <p>您必须年满18周岁才能注册和使用本系统。在注册过程中，您需要提供真实、准确、完整的信息，并在信息发生变化时及时更新。</p>
          
          <h3>2.2 账户安全</h3>
          <p>您应负责维护您的账户和密码的安全性，并对在您账户下发生的所有活动负责。如果您发现任何未经授权使用您账户的情况，请立即通知我们。</p>
          
          <h3>2.3 账户义务</h3>
          <p>您同意：</p>
          <ul>
            <li>不使用他人的账户或冒充他人</li>
            <li>不共享或转让您的账户给他人</li>
            <li>不使用自动化方式创建账户或收集数据</li>
          </ul>
        </section>
        
        <section>
          <h2>3. 服务内容</h2>
          <p>本系统提供以下服务（以下简称"服务"）：</p>
          <ul>
            <li>健康数据收集与存储</li>
            <li>健康数据分析与可视化</li>
            <li>健康风险预测</li>
            <li>个性化健康建议</li>
            <li>健康报告生成</li>
          </ul>
          <p>我们保留随时修改、暂停或终止部分或全部服务的权利，无需事先通知。</p>
        </section>
        
        <section>
          <h2>4. 用户行为规范</h2>
          <p>在使用本系统时，您同意不：</p>
          <ul>
            <li>上传、发布、传输或存储任何违反法律法规、侵犯他人权利、或包含色情、暴力、歧视等内容的信息</li>
            <li>干扰或破坏系统的正常运行，包括但不限于黑客攻击、病毒传播、滥用系统资源等</li>
            <li>尝试未经授权访问系统或其他用户的数据</li>
            <li>使用本系统进行任何非法活动或侵权行为</li>
            <li>违反本协议或其他适用规则和政策</li>
          </ul>
        </section>
        
        <section>
          <h2>5. 知识产权</h2>
          <p>本系统及其内容（包括但不限于文本、图像、图形、音频、视频、软件、代码、数据等）的所有知识产权均归我们或我们的许可方所有。未经我们明确书面许可，您不得复制、修改、分发、销售、出租、转让或以其他方式使用本系统的任何部分。</p>
          <p>您保留对您上传至本系统的原创内容的知识产权，但您授予我们在全球范围内、不可撤销的、免费的许可，以使用、复制、修改、分发、展示和表演您的内容，仅用于提供和改进服务的目的。</p>
        </section>
        
        <section>
          <h2>6. 免责声明与限制责任</h2>
          <h3>6.1 服务提供</h3>
          <p>本系统按"现状"和"可用"的方式提供，我们不对服务的可用性、可靠性、及时性或安全性做出任何明示或暗示的保证。我们不保证服务将满足您的需求，或不会出现中断、错误或缺陷。</p>
          
          <h3>6.2 健康建议</h3>
          <p>本系统提供的健康预测和建议仅供参考，不应替代专业医疗建议、诊断或治疗。您在做出任何健康相关决定前，应咨询专业医疗人员的意见。我们不对因依赖本系统提供的信息而导致的任何健康后果负责。</p>
          
          <h3>6.3 责任限制</h3>
          <p>在法律允许的最大范围内，我们不对因使用或无法使用本系统而导致的任何间接、附带、特殊、后果性或惩罚性损害负责，包括但不限于利润损失、数据损失、商誉损失等。</p>
          <p>我们对任何服务相关索赔的总责任不超过您在过去12个月内为使用本服务支付的费用（如有）。</p>
        </section>
        
        <section>
          <h2>7. 隐私保护</h2>
          <p>我们重视您的隐私保护。您的信息收集、使用、存储和共享将按照我们的隐私政策进行。通过使用本系统，您同意我们按照隐私政策的规定处理您的信息。</p>
        </section>
        
        <section>
          <h2>8. 协议的修改</h2>
          <p>我们保留随时修改本协议的权利。当我们对协议进行重大修改时，我们会在系统中发布通知，并更新页面顶部的"最后更新日期"。修改后的协议自发布之日起生效。您继续使用本系统将被视为接受修改后的协议。</p>
        </section>
        
        <section>
          <h2>9. 协议的终止</h2>
          <h3>9.1 用户终止</h3>
          <p>您可以随时终止您的账户和使用本服务，只需停止使用系统并联系我们删除您的账户。</p>
          
          <h3>9.2 我们的终止权</h3>
          <p>如果您违反本协议的任何条款，我们有权在不事先通知的情况下暂停或终止您的账户和访问权限。此外，如果我们决定不再提供服务，我们也可能终止本协议。</p>
          
          <h3>9.3 终止的后果</h3>
          <p>协议终止后，您将失去对本系统的访问权限，我们可能会删除您的账户和相关数据，但法律要求保留的除外。终止不影响任何在终止前已产生的权利和义务。</p>
        </section>
        
        <section>
          <h2>10. 适用法律与争议解决</h2>
          <p>本协议受中华人民共和国法律管辖。因本协议或使用本系统而产生的任何争议，双方应首先通过友好协商解决；协商不成的，任何一方均有权向有管辖权的人民法院提起诉讼。</p>
        </section>
        
        <section>
          <h2>11. 其他条款</h2>
          <p>本协议构成您与我们之间关于使用本系统的完整协议，取代之前的任何口头或书面协议。如果本协议的任何条款被认定为无效或不可执行，该条款将被最接近其原意的有效条款所替代，其余条款继续有效。</p>
        </section>
        
        <section>
          <h2>12. 联系我们</h2>
          <p>如果您对本协议有任何问题或意见，请通过以下方式联系我们：</p>
          <p>电子邮件：legal@healthpredict.com</p>
          <p>电话：400-123-4567</p>
        </section>
        
        <div class="last-updated">最后更新日期：2025年10月24日</div>
      </div>
    </div>
  </div>
</template>

<script setup>
// 用户协议页面组件
import { useRouter } from 'vue-router'

const router = useRouter()

function goBack() {
  router.back()
}
</script>

<style scoped>
.page-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  min-height: 100vh;
  background-color: #f5f7fa;
}

.content-wrapper {
  background-color: #fff;
  padding: 40px;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  position: relative;
}

.policy-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
  padding-bottom: 20px;
  border-bottom: 2px solid #ecf0f1;
}

h1 {
  color: #2c3e50;
  margin: 0;
  font-size: 28px;
}

.back-button {
  background-color: #3498db;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 16px;
  transition: background-color 0.3s ease;
}

.back-button:hover {
  background-color: #2980b9;
}

.policy-content {
  max-height: 60vh;
  overflow-y: auto;
  padding-right: 10px;
}

.agreement-content {
  background-color: #ffffff;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  padding: 2rem;
}

section {
  margin-bottom: 2.5rem;
}

h2 {
  color: #3498db;
  margin-top: 30px;
  margin-bottom: 15px;
  border-bottom: 2px solid #ecf0f1;
  padding-bottom: 10px;
  font-size: 22px;
}

h3 {
  color: #7f8c8d;
  margin-top: 20px;
  margin-bottom: 10px;
  font-size: 18px;
}

p {
  color: #34495e;
  line-height: 1.8;
  margin-bottom: 15px;
  text-align: justify;
}

ul {
  margin-left: 20px;
  margin-bottom: 15px;
}

li {
  color: #34495e;
  line-height: 1.8;
  margin-bottom: 8px;
}

.last-updated {
  text-align: center;
  color: #94a3b8;
  font-size: 0.875rem;
  margin-top: 3rem;
  padding-top: 1rem;
  border-top: 1px solid #e2e8f0;
}

/* 滚动条样式 */
.policy-content::-webkit-scrollbar {
  width: 8px;
}

.policy-content::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 4px;
}

.policy-content::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 4px;
}

.policy-content::-webkit-scrollbar-thumb:hover {
  background: #555;
}

@media (max-width: 768px) {
  h1 {
    font-size: 2rem;
  }
  
  .agreement-content {
    padding: 1.5rem;
  }
  
  h2 {
    font-size: 1.35rem;
  }
  
  h3 {
    font-size: 1.15rem;
  }
}
</style>